<template>
	<u-popup :show="visible" @close="close">
		<view class="popup">
			<view class="popup-header">
				<view class="popup-header-l" @click="cancel">取消</view>
				<view class="popup-header-r" @click="sure">确定</view>
			</view>
			<view class="popup-title">选择你的领域</view>
			<view class="popup-conent">
				<view class="popup-conent-list" v-for="it in info">
					<view class="popup-conent-list-item"
						@click="Array.isArray(it.children) && it.children.length > 0 ? '' : setValue(it.name)">
						{{it.name}}
						<view>
							<image :src="ossUrl + `/static/gou.png`" mode="" v-if="it.name === name"></image>
						</view>
					</view>
					<view class="popup-conent-list-c" v-if="Array.isArray(it.children) && it.children.length > 0">
						<view :class="name === item.name ? 'popup-conent-list-c-item ac' : 'popup-conent-list-c-item' "
							v-for="item in it.children" @click="setValue(item.name)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		InformationIdentity,
		InformationEditBusinessCard,
		circle_identity
	} from '@/common/http/api.js'
	export default {
		props: {
			value: {
				type: String | Number,
				default: () => ''
			}
		},
		data() {
			return {
				visible: false,
				info: [],
				id: '',
				name: ''
			}
		},
		created() {

		},
		methods: {
			show(id) {
				this.visible = true
				uni.showLoading()
				circle_identity({id}).then(res => {
					this.info = res.data
				}).finally(err => {
					uni.hideLoading()
				})
			},
			close() {
				this.visible = false
			},
			setValue(name) {
				//this.$emit('input', id)
				this.name = name
			},
			cancel() {
				this.visible = false
			},
			sure() {
				this.visible = false
				this.$emit('input', {
					name: this.name
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		width: 100%;
		position: relative;

		.popup-header {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 28rpx 36rpx;
			position: absolute;
			top: 0;
			left: 0;

			.popup-header-l {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #999999;
			}

			.popup-header-r {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #23B97F;
			}
		}

		.popup-title {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #131313;
			padding: 46rpx 0;
			text-align: center;
		}

		.popup-conent {
			width: 100%;
			overflow-y: scroll;
			max-height: 700rpx;

			.popup-conent-list {
				width: 100%;

				.popup-conent-list-item {

					width: 600rpx;
					height: 100rpx;
					background: #F6F7F8;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 36rpx 51rpx;
					margin-bottom: 27rpx;

					image {
						width: 40rpx;
						height: 32rpx;
					}
				}

				.popup-conent-list-c {
					width: 100%;
					box-sizing: border-box;
					padding: 0 61rpx;
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 14rpx;

					.popup-conent-list-c-item {
						padding: 11rpx 18rpx;
						background: #F6F7F8;
						border-radius: 25rpx;
						display: inline-block;
						margin-right: 13rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #131313;
						margin-bottom: 13rpx;
					}

					.ac {
						background: #23B97F;
						color: white;
					}
				}
			}
		}
	}
</style>